<template>
<div class="side-menu">
  <a-layout-sider
    :class="['sider', isMobile ? null : 'shadow', fixSiderbar? 'ant-fixed-sidemenu' : null]"
    width="256px"
    :collapsible="collapsible"
    v-model="collapsed"
    :trigger="null">
<!--     <div :class="['logo', theme]">
      <router-link to="/">
        <img src="static/img/logo.png" alt="">
        <div>
          <h1 class="animated fadeIn">{{systemName}}</h1>
          <p class="wy-font-16">综合信息服务平台</p>
        </div>
      </router-link>
    </div> -->
    <i-menu theme="light" :collapsed="collapsed" :menuData="menuData" @select="onSelect"/>
  </a-layout-sider>
</div>
</template>

<script>
import IMenu from './menu'
import { mapState } from 'vuex'

export default {
  name: 'SiderMenu',
  components: {IMenu},
  props: {
    collapsible: {
      type: Boolean,
      required: false,
      default: false
    },
    collapsed: {
      type: Boolean,
      required: false,
      default: false
    },
    menuData: {
      type: Array,
      required: true
    }
  },
  computed: {
    ...mapState({
      isMobile: state => state.setting.isMobile,
      systemName: state => state.setting.systemName,
      fixSiderbar: state => state.setting.fixSiderbar
    })
  },
  methods: {
    onSelect (obj) {
      this.$emit('menuSelect', obj)
      this.$router.push(obj.key)
    }
  }
}
</script>

<style lang="less">
.side-menu{
  margin-top: 98px;
  .ant-menu-submenu-open.ant-menu-submenu-inline > .ant-menu-submenu-title .ant-menu-submenu-arrow:before{
    -webkit-transform: rotate(-45deg) translateX(4px);
    transform: rotate(-45deg) translateX(4px);
  }
  .ant-menu-submenu-open.ant-menu-submenu-inline > .ant-menu-submenu-title .ant-menu-submenu-arrow:after{
    -webkit-transform: rotate(45deg) translateX(-4px);
    transform: rotate(45deg) translateX(-4px);
  }
  .ant-menu-submenu-inline > .ant-menu-submenu-title .ant-menu-submenu-arrow:before{
    -webkit-transform: rotate(-45deg) translateX(-4px);
    transform: rotate(-45deg) translateX(-4px);

  }
  .ant-menu-submenu-inline > .ant-menu-submenu-title .ant-menu-submenu-arrow:after{
    -webkit-transform: rotate(45deg) translateX(-4px);
    transform: rotate(45deg) translateX(-4px);
  }

  .ant-menu-submenu-vertical > .ant-menu-submenu-title .ant-menu-submenu-arrow:before, .ant-menu-submenu-vertical-left > .ant-menu-submenu-title .ant-menu-submenu-arrow:before, .ant-menu-submenu-vertical-right > .ant-menu-submenu-title .ant-menu-submenu-arrow:before, .ant-menu-submenu-inline > .ant-menu-submenu-title .ant-menu-submenu-arrow:before, .ant-menu-submenu-vertical > .ant-menu-submenu-title .ant-menu-submenu-arrow:after, .ant-menu-submenu-vertical-left > .ant-menu-submenu-title .ant-menu-submenu-arrow:after, .ant-menu-submenu-vertical-right > .ant-menu-submenu-title .ant-menu-submenu-arrow:after, .ant-menu-submenu-inline > .ant-menu-submenu-title .ant-menu-submenu-arrow:after{
    width: 10px;
  }
  .ant-menu-submenu-inline > .ant-menu-submenu-title .ant-menu-submenu-arrow{
    right: 16px;
    width: 12px;
  }
  .ant-menu-submenu-arrow,.ant-menu-submenu-arrow:after{
    width: 12px;
  }
  .ant-menu-item .anticon, .ant-menu-submenu-title .anticon{
    font-size: 16px;
  }
  .ant-layout-sider-children{
    overflow: hidden;
  }
  .ant-menu-light{
    overflow: auto;
    height: 100%;
  }
  .shadow {
    box-shadow: 1px 0 6px rgba(0, 21, 41, .35);
  }
  .ant-menu-inline>.ant-menu-item, .ant-menu-inline>.ant-menu-submenu>.ant-menu-submenu-title, .ant-menu-vertical-left>.ant-menu-item, .ant-menu-vertical-left>.ant-menu-submenu>.ant-menu-submenu-title, .ant-menu-vertical-right>.ant-menu-item, .ant-menu-vertical-right>.ant-menu-submenu>.ant-menu-submenu-title, .ant-menu-vertical>.ant-menu-item, .ant-menu-vertical>.ant-menu-submenu>.ant-menu-submenu-title{
    height: 50px;
    line-height: 50px;
    font-size: 16px;
    margin-bottom: 0px !important;
    margin-top: 0px !important;
  }
  .ant-menu-item-selected,.ant-menu:not(.ant-menu-horizontal) .ant-menu-item-selected{
    background-color: #E9F4F3;
  }
  .sider {
    z-index: 16;
    position: relative;
    overflow-x: hidden;
    &.light {
      background-color: #fff;
    }
    &.dark {
      background-color: #393e46;
    }
    &.ant-fixed-sidemenu {
      position: fixed;
      overflow-y: auto;
      height: 100%;
			height: calc(100% - 88px);
    }
    .logo {
      margin-bottom: 20px !important;;
      height: 98px;
      position: relative;
      line-height: 98px;
      padding-left: 24px;
      -webkit-transition: all .3s;
      transition: all .3s;
      overflow: hidden;
      &.light {
        background-color: #15837a;
        border-bottom: 1px solid #15837a;
      }
      &.dark {
        background-color: #393e46;
        h1 {
          color: #fff;
        }
      }
      h1 {
        color: #fff !important;
        font-size: 20px;
        margin: 0 0 0 12px;
        font-weight: 600;
        display: inline-block;
        height: 32px;
        line-height: 32px;
        vertical-align: middle;
      }
      img {
        width: 32px;
        display: inline-block;
        vertical-align: middle;
      }
    }
  }
}
</style>
